<script setup>
import { computed, ref } from "vue";
import { useCourseStore } from "@/store/course";
import { storeToRefs } from "pinia";
import { useRouter, useRoute } from "vue-router";
import { logout, isLogin, getUserInfo } from "@/utils/index";
import { coursesDict } from "@/utils/dicts";
const router = useRouter();
const route = useRoute();
const courseStore = useCourseStore();
const { activeCourseId, searchText } = storeToRefs(courseStore);

const menus = ref([]);
coursesDict.map((item) => {
  menus.value.push({
    id: item.dictCode,
    title: item.dictName,
    path: "/courses",
  });
});
menus.value.push({ id: "999", title: "发布中心", path: "/404" });

if (route.name !== "Courses") {
  courseStore.setCourseId(null);
} else if (!activeCourseId.value) {
  courseStore.setCourseId(route.query?.id || menus[0].id);
}
const jumpTo = (path, query) => {
  router.push({
    path: path,
    query: query,
  });
};
const handleToggleMenu = (menu, query) => {
  courseStore.setCourseId(menu.id);
  courseStore.setSearchText("");
  jumpTo(menu.path, query);
};
let searchValue = ref(searchText.value || "");
const submitSearch = () => {
  // if (searchValue.value.trim()) {
  courseStore.setSearchText(searchValue.value);
  courseStore.setCourseId("0");
  jumpTo("/courses", { id: "0" });
  // }
};
router.afterEach((to, from) => {
  if (to.name !== "Courses") {
    courseStore.setCourseId(null);
  }
});
const username = computed(() => getUserInfo().username);
const userIsLogin = computed(() => isLogin());
</script>
<template>
  <nav
    class="navbar navbar-expand-sm bg-white navbar-light shadow-sm fixed-top py-0"
  >
    <div class="container-fluid">
      <RouterLink class="navbar-brand" to="/">
        <strong class="text-primary">小蔓学堂</strong> 体验课
      </RouterLink>
      <div class="collapse navbar-collapse" id="navbarScroll">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li
            :class="
              'nav-item' + (activeCourseId === item.id ? ' isActived' : '')
            "
            v-for="item in menus"
            :key="item.id"
          >
            <span
              class="nav-link menu-item"
              @click="handleToggleMenu(item, { id: item.id })"
              >{{ item.title }}</span
            >
          </li>
        </ul>
        <el-form :inline="true" @submit.prevent="submitSearch">
          <el-form-item class="mb-0">
            <el-input type="text" v-model="searchValue" placeholder="搜索">
              <template #append>
                <el-button
                  class="btn-outline-primary"
                  type="primary"
                  plain
                  @click="submitSearch"
                >
                  <i class="fas fa-search" />
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-dropdown v-if="userIsLogin" :teleported="false">
          <span class="el-dropdown-link">
            <i class="fal fa-user"></i> {{ username }}
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="jumpTo('usercenter')">
                用户中心
              </el-dropdown-item>
              <el-dropdown-item @click="logout"> 退出登录 </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <RouterLink v-else to="/login">
          <a
            class="btn btn-outline-primary shadow-sm"
            href="#"
            data-toggle="modal"
            data-target="#modal_newsletter"
          >
            <i class="fal fa-user"></i> 登录
          </a>
        </RouterLink>
      </div>
    </div>
  </nav>
</template>
<style lang="scss" scoped>
.nav-item {
  cursor: pointer;
}
.isActived {
  .menu-item {
    font-weight: 600;
    color: #502c6c !important;
  }
}
.dropdown-menu-item {
  line-height: inherit;
}
</style>
